﻿@using KelonProud.Mvc.Models

@{
    Layout = "~/Views/Shared/_VueMaster.cshtml";
}

@section styles
    {

    <link href="~/lib/codemirror/theme/neat.css" rel="stylesheet" />
    <link href="~/lib/codemirror/lib/codemirror.css" rel="stylesheet" />
    <link href="~/lib/codemirror/addon/hint/show-hint.css" rel="stylesheet" />

    <style>
    #app {
        height: 100%;
        width: 100%;
        background-color: #fff;
        padding: 10px 15px;
        overflow: hidden;
    }

    .header {
        padding: 10px;
    }

    .footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        padding: 10px;
    }

    .content-tab > .ivu-tabs-bar {
        display: none;
    }

    .codesql {
        font-size: 11pt;
        font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    }

    .content-tab {
        height: calc(100% - 100px);
    }

        .content-tab .ivu-tabs-content {
            height: 100%;
        }

            .content-tab .ivu-tabs-content form {
                height: 100%;
            }

                .content-tab .ivu-tabs-content form .script-row {
                    height: calc(100% - 340px);
                }

                    .content-tab .ivu-tabs-content form .script-row .ivu-col {
                        height: 100%;
                    }

                        .content-tab .ivu-tabs-content form .script-row .ivu-col .ivu-form-item {
                            height: 100%;
                        }

                            .content-tab .ivu-tabs-content form .script-row .ivu-col .ivu-form-item .ivu-form-item-content {
                                height: 100%;
                            }

    .ivu-tabs {
        height: calc(100%);
    }

    .script-row .ivu-tabs-content {
        height: calc(100% - 70px);
    }

    .CodeMirror {
        border: 1px solid #dcdee2;
        font-size: 13px;
    }

    .filed-design-div {
        height: calc(100% - 110px);
        border: solid 1px #dcdee2;
    }

        .ivu-divider-horizontal {
         margin:10px 0px;
        }
  </style>
}

@section scripts{
    <script src="~/lib/codemirror/lib/codemirror.js"></script>
    <script src="~/lib/codemirror/addon/edit/matchbrackets.js"></script>
    <script src="~/lib/codemirror/addon/selection/active-line.js"></script>
    <script src="~/lib/codemirror/mode/sql/sql.js"></script>
    <script src="~/lib/codemirror/addon/hint/show-hint.js"></script>
    <script src="~/lib/codemirror/addon/hint/sql-hint.js"></script>
    <script src="~/lib/vue/Components/CodeMirror.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                step: 1,
                designSplit: 0.3,
                tenantList: [],
                queryModel: {
                    tenantId: -1,
                    name: "",
                    code: "",
                    isAutoLoad: true,
                    isBindNav: true,
                    selectSql: "SELECT * FROM KpUsers",
                    exportSql: "",
                    description: ""
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' },
                        { type: 'string', min: 4, max: 15, message: '名称长度必须在4-15个字符范围内', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '编码不能为空', trigger: 'blur' },
                        { type: 'string', min: 4, max: 15, message: '编码长度必须在4-15个字符范围内', trigger: 'blur' }
                    ],
                    selectSql: [
                        { required: true, message: '查询脚本不能为空', trigger: 'blur' },
                    ]
                }
            },
            created: function() {
                var that = this;
                abp.ajax({
                    url: "/api/services/admin/tenant/GetTenants"
                }).done(function(ret) {
                    that.tenantList = ret;
                });
            },
            computed: {
                stepIsFirst: function() {
                    return this.step === 0;
                },
                stepIsLast: function() {
                    return this.step === 4;
                },
                tab: function() {
                    return "tab" + this.step;
                },
                isAdminTenant: function() {
                    return "@IsHasTenantId" === "True";
                }
            },
            methods: {
                prev: function() {
                    this.step--;
                },
                next: function() {
                    if (this.step == 0) {
                        this.$refs["firstForm"].validate((valid) => {
                            if (valid) {
                                this.GenerateGridColumnList();
                                this.step++;
                            } else {
                                this.$Message.error('请先正确填写信息');
                            }
                        });
                    } else {
                        this.step++;
                    }
                },
                save: function() {
                    alert("保存成功");
                },
                nameIsExists: function(event) {
                    var that = this;
                    if (that.queryModel.name === "") {
                        that.$Message.error('查询名称必须填写');
                        event.target.focus();
                    } else {
                        abp.ajax({
                            url: "/api/services/query/QueryGrid/NameIsExists",
                            data: {
                                name: that.queryModel.name,
                                id: that.queryModel.id,
                                tenantId: that.queryModel.tenantId
                            }
                        }).done(function(ret) {
                            if (ret.result) {
                                that.$Message.error('查询名称重复');
                                event.target.focus();
                            }
                        });
                    }
                },
                codeIsExists: function(event) {
                    var that = this;
                    abp.ajax({
                        url: "/api/services/query/QueryGrid/CodeIsExists",
                        data: {
                            code: that.queryModel.code,
                            id: that.queryModel.id,
                            tenantId: that.queryModel.tenantId
                        }
                    }).done(function(ret) {
                        if (ret.result) {
                            that.$Message.error('查询编码重复');
                            event.target.focus();
                        }
                    });
                },
                GenerateGridColumnList: function() {
                    abp.ui.setBusy(".filed-design-div");
                    abp.services.query.queryGrid.generateGridColumnList(this.queryModel.selectSql).done(function(ret) {

                    }).finally(function() {
                        abp.ui.clearBusy(".filed-design-div");
                    });
                }
            },
            watch: {
                queryModel: function(val) {
                    debugger;
                },
                step: function(val) {
                },
                test: function(val) {
                }
            }
        })
    </script>
}

<div id="app">
    <div class="header">
        <Steps :current="step" status="success">
            <Step title="基础信息" content="填写查询基础信息"></Step>
            <Step title="结构配置" content="配置表格的展示的结构信息"></Step>
            <Step title="查询配置" content="配置表格的查询条件信息"></Step>
            <Step title="菜单配置" content="配置查询关联的菜单配置"></Step>
            <Step title="效果预览" content="预览表格数据，并保存数据"></Step>
        </Steps>
    </div>
    <tabs v-model="tab" class="content-tab" name="waper-tab">
        <tab-pane name="tab0" tab="waper-tab">
            <i-form ref="firstForm" label-position="right" :label-width="100" :model="queryModel" :rules="ruleValidate">
                <row>
                    <i-col span="12">
                        <form-item label="名称：" prop="name">
                            <i-input v-model="queryModel.name" v-on:on-blur="nameIsExists"></i-input>
                        </form-item>
                    </i-col>
                    <i-col span="12">
                        <form-item label="编码：" prop="code">
                            <i-input v-model="queryModel.code" v-on:on-blur="codeIsExists"></i-input>
                        </form-item>
                    </i-col>
                </row>
                <row>
                    <i-col span="12">
                        <form-item label="所属租户：" v-if="isAdminTenant">
                            <i-select v-model="queryModel.tenantId">
                                <i-option :value="-1" :key="-1">无  </i-option>
                                <i-option v-for="item in tenantList" :value="item.id" :key="item.id">{{ item.name }}</i-option>
                            </i-select>
                        </form-item>
                    </i-col>
                    <i-col span="12">
                        <form-item label="自动加载：">
                            <i-switch :value="queryModel.isAutoLoad">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </form-item>
                    </i-col>
                </row>
                <row class="script-row">
                    <i-col span="24">
                        <form-item label="脚本：" prop="selectSql">
                            <tabs name="script-tab">
                                <tab-pane label="查询Sql脚本" name="tabQuerySql" tab="script-tab">
                                    <code-mirror :name="'selectSql'" v-model="queryModel.selectSql" :theme-name="'neat'"></code-mirror>
                                </tab-pane>
                                <tab-pane label="导出Sql脚本" name="tabExportSql" tab="script-tab">
                                    <code-mirror :name="'exportSql'" v-model="queryModel.exportSql" :theme-name="'neat'"></code-mirror>
                                </tab-pane>
                            </tabs>
                        </form-item>
                    </i-col>
                </row>
                <row>
                    <i-col span="24">
                        <form-item label="描述：">
                            <i-input v-model="queryModel.Description" type="textarea" :rows="4" placeholder="查询的详细描述..." />
                        </form-item>
                    </i-col>
                </row>
            </i-form>

        </tab-pane>
        <tab-pane name="tab1" tab="waper-tab">
            <div class="filed-design-div">
                <Split v-model="designSplit" mode="vertical" min="100px">
                    <div slot="top" class="demo-split-pane">
                        <p class="text-center font-16 m-t-10 col-teal">字段列表</p>
                        <Divider></Divider>
                    </div>
                    <div slot="bottom" class="demo-split-pane">
                        <p class="text-center font-16 m-t-10 col-teal">
                            表头设计
                        </p>
                        <Divider></Divider>
                        <button-group class="pull-right m-r-10 ">
                            <i-button icon="ios-menu-outline" type="success">添加行</i-button>
                            <i-button icon="ios-grid-outline" type="success">添加列</i-button>
                            <i-button icon="ios-close" type="error">删除</i-button>
                            <i-button icon="md-repeat" type="warning">重置</i-button>
                        </button-group>
                    </div>
                </Split>
            </div>
        </tab-pane>
        <tab-pane  name="tab2" tab="waper-tab">标签三的内容</tab-pane>
        <tab-pane  name="tab3" tab="waper-tab">标签三的内容</tab-pane>
        <tab-pane  name="tab4" tab="waper-tab">标签三的内容</tab-pane>
    </tabs>

    <div class="footer">
        <i-button type="warning" @@click="prev" v-bind:disabled="stepIsFirst">
            <Icon type="ios-arrow-back"></Icon>
            上一步
        </i-button>

        <i-button type="primary" class="pull-right" @@click="next" v-if="!stepIsLast">
            下一步
            <Icon type="ios-arrow-forward"></Icon>
        </i-button>
        <i-button type="primary" class="pull-right" @@click="save" v-if="stepIsLast">
            保存
            <Icon type="md-checkmark" />
        </i-button>
    </div>
</div>